<!-- shift+!  生成html文档结构 -->
<!-- 
    块元素：   独占一行, 后面元素换行显示
    行内元素：  内容多宽多高，元素就是多宽多高，多个行内元素挨着显示
   div块元素

   
   span行内元素


-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html标签元素</title>
</head>

<body>
    <!-- 标题标签 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- p 段落 -->
    <p>文章段落</p>

    <!-- br 换行 -->
    <!-- hr 水平分割线 -->

    <!-- img 图像 -->
    <img src="../img/11.jpg" alt="图像" />

    <!-- a 超链接 -->
    <a href="http://www.baidu.com">百度</a>

    <!-- 列表标签 -->
    <ul>
        <li>元素一</li>
        <li>元素二</li>
        <li>元素三</li>
    </ul>

    <ol>
        <li>有序1</li>
        <li>有序2</li>
        <li>有序3</li>
    </ol>

    <!-- 表格 -->
    <table border="1">
        <tr>
            <th>单元格1</th>
            <th>单元格2</th>
        </tr>

        <tr>
            <td>单元格11</td>
            <td>单元格22</td>
        </tr>
    </table>

    <!-- 表单 
        文本输入框
        密码输入框
        单选框
        复选框
        多行文本框
        下拉选择框
        文件选择框 
    -->
    <form>
        用户名: <input type="text" name="username"><br />
        密码: <input type="password" name="password" /><br />
        性别: <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
        <br />
        兴趣爱好:
        玩游戏 <input type="checkbox" name="xq" value="playgame">
        游泳 <input type="checkbox" name="xq" value="swiming">
        <br />
        出生日期
        <select name="birthdy">
            <option value="20020101">2002/01/01</option>
            <option value="20020102">2002/01/02</option>
            <option value="20020103">2002/01/03</option>
        </select>
        <br />
        <textarea name=""></textarea>
        <br />
        <input type="file" name="header">
        <br />
        <button>提交</button>
        <input type="submit">
    </form>

    <!-- 
       div 和 span  
       独占一行, 后面元素换行显示
       内容多宽多高，元素就是多宽多高，多个行内元素挨着显示
    -->
    <div> 块元素</div>
    <span>行内元素1</span> <span>行内元素2</span>
</body>

</html>